<template>
	<view class="u-page u-flex-col" :style="skin">
		<view v-if="!userSellersInfo"><zx-nav bg="#f4f4f4" title="店铺已关闭"></zx-nav></view>
		<template v-else>
			<loading :isShow="pageLoadingShow" size="lg"></loading>
			<view style="position: relative;">
				<image :src="`${assetsPath}/mine/bg.png`" mode="widthFix" class="bg"></image>
				<zx-nav bg="api_configs.topBgColor" color="#FFFFFF" :mpShowRight="true" :noHoldHeight="false" :noTitle="true">
					<searchbar slot="center"></searchbar>
					<view slot="right" class="car" @tap="navTo('/pages/car/car', 'switchTab')">
						<image src="/static/cart2.png" mode="widthFix"></image>
						<view class="dot"><u-badge max="99" :value="cartNum"></u-badge></view>
					</view>
				</zx-nav>
				<view class="pt10" style="position: relative;z-index: 9;">
					<view class="sellerInfo pb20 flex align-center justify-between">
						<view class=" flex align-center">
							<view class="imgbox"><image :src="shopinfo.supplier_img" mode="widthFix"></image></view>
							<view>
								<view class="u-flex-y-center">
									<view class="name u-m-r-10">{{ shopinfo.supplier_name }}</view>
									<u-tag
										v-if="shopinfo.dp_lable == 1 && shopinfo.dp_lable_name"
										size="mini"
										:color="shopinfo.dp_lable_color"
										:bgColor="shopinfo.dp_lable_bg_color"
										:borderColor="shopinfo.dp_lable_bg_color"
										:text="shopinfo.dp_lable_name"
									></u-tag>
								</view>
								<view>
									评分：{{ shopinfo.evaluate }}
									<rate normal="rgb(222,222,222)" active="#F0FF00" :current="shopinfo.evaluate" :size="14"></rate>
								</view>
								<view class="flex  ">
									<u-icon name="map" color="#fff" size="28"></u-icon>
									{{ shopinfo.store_house_address }}
								</view>
								<view class="flex mt15 ">
									<image class="shop-tag" :src="tag.img_url" mode="heightFix" v-for="(tag, index) in shopinfo.supplier_lable" :key="index"></image>
								</view>
							</view>
						</view>
						<view @tap="follow" class="follow flex u-col-center u-row-center" :class="{ active: shopinfo.supplier_is_follow == 1 }">
							<image v-if="shopinfo.supplier_is_follow == 0" :src="`${assetsPath}/fav2.png`" mode="widthFix"></image>
							<text class="ml8">{{ shopinfo.supplier_is_follow == 0 ? '' : '已' }}关注</text>
						</view>
					</view>
					<gxf-tabs
						activeColor="#fff"
						@clickTab="gxfTabs_tabChange"
						@tabHeight="gxfTabs_tabHeight"
						class="gxfTabs"
						color="#fff"
						ref="gxfTabs"
						height="90"
						marginRt="70"
						:tabsData="tabsData"
						:tabsIndex="tabIndex"
						:value="tabIndex"
					></gxf-tabs>
				</view>
			</view>
			<view class="u-flex-1 u-bg-white" style="overflow: auto; position: relative;">
				<pros :toTop="toTop" v-if="tabsData[tabIndex].id === 'pros'" ref="pros"></pros>
				<cate @clickCate="cate_clickCate" v-if="tabsData[tabIndex].id === 'cate'" :cateList="shopinfo.class"></cate>
				<comment ref="comment" v-if="tabsData[tabIndex].id === 'comment'"></comment>
			</view>
		</template>
	</view>
</template>

<script>
import loading from '@/components/loading';
import searchbar from '@/components/searchbar';
import zxNav from '@/components/zx-nav/zx-nav';
import rate from '@/components/rate/rate.vue';
import gxfTabs from '@/components/gxf-Tabs/Tabs.vue';
import pros from './components/pros.vue';
import cate from './components/cate.vue';
import comment from './components/comment.vue';
import { mapState } from 'vuex';
import sharemixin from '@/common/sharemixin.js';
export default {
	data() {
		return {
			userSellersInfo: {},
			pageLoadingShow: false,
			tabIndex: 0,
			tabHeight: 0,
			option: {},
			tabsData: [
				{
					id: 'pros',
					title: '全部商品',
					tip: ''
				},
				{
					id: 'cate',
					title: '分类',
					tip: ''
				},
				{
					id: 'comment',
					title: '评价',
					tip: '0'
				}
			],
			toTop: 0,
			shopId: '',
			shopinfo: {},
			cate: {},
			cateId: ''
		};
	},
	components: { loading, searchbar, zxNav, rate, gxfTabs, pros, cate, comment },
	mixins: [sharemixin],
	computed: {
		...mapState(['memberId', 'cartNum'])
	},
	onLoad(options) {
		this.shopId = options.id;
		this.getSupplierInfo();
		if (!!options.recommendId) {
			this.SET_INVITED(options.recommendId);
		}
	},
	onShareTimeline() {
		let scene = `id=${this.shopId}`;
		if (this.memberId) {
			scene = scene + '&recommendId=' + this.memberId;
		}
		let shareParams = {
			title: this.share_title,
			imageUrl: this.share_img,
			path: `/pages/shop/shop`,
			query: scene
		};
		return shareParams;
	},
	onShareAppMessage() {
		let scene = `id=${this.shopId}`;
		if (this.memberId) {
			scene = scene + '&recommendId=' + this.memberId;
		}
		let shareParams = {
			title: this.share_title,
			imageUrl: this.share_img,
			path: `/pages/shop/shop?${scene}`
		};
		return shareParams;
	},
	mounted() {
		this.$nextTick(() => {
			this.setDom();
			this.$refs.pros.init(this.shopId, '');
		});
	},
	methods: {
		setDom: function() {
			var t = this;
			this.domData('.gxfTabs', function(e) {
				// t.toTop = e[0].bottom + 28;
			});
		},
		gxfTabs_tabChange: function(n) {
			var t = this;
			console.log('this.tabsData[n]', this.tabsData[n], n);
			this.tabIndex = n;
			this.$nextTick(() => {
				if ('pros' === t.tabsData[n].id) {
					t.tabsData[0].title = '全部商品';
					t.cateId = '';
					this.$refs.pros.init(this.shopId, t.cateId);
				} else if ('comment' === t.tabsData[n].id) {
					setTimeout(() => {
						this.$refs.comment && this.$refs.comment.init(this.shopId);
					}, 100);
				}
			});
		},
		gxfTabs_tabHeight: function(e) {
			this.tabHeight = e;
		},
		cate_clickCate(cate) {
			this.cate = { ...cate };
			this.cateId = (cate && cate.id) || '';
			this.tabIndex = 0;
			this.tabsData[0].title = this.cate.name;
			this.$nextTick(() => {
				this.$refs.pros.init(this.shopId, this.cateId);
			});
		},
		getSupplierInfo() {
			this.$postAction(this.$api.getSupplierInfo + this.shopId).then(da => {
				if (da.code == 0) {
					this.shopinfo = da.data;
					let evaluate_count = da.data.evaluate_count || 0;
					this.tabsData[2].title = '评价' + (evaluate_count > 0 ? '(' + evaluate_count + ')' : '');
					this.share_title = this.shopinfo.supplier_name;
					this.share_img = this.shopinfo.supplier_img;
				}
			});
		},
		follow() {
			let url = this.$api.addSupplierFollow;
			if (this.shopinfo.supplier_is_follow) {
				url = this.$api.delSupplierFollow;
			}
			this.$postAction(url + this.shopId, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0) {
					this.shopinfo.supplier_is_follow = this.shopinfo.supplier_is_follow == 0 ? 1 : 0;
					uni.showToast({
						title: this.shopinfo.supplier_is_follow ? '关注成功' : '已取消关注',
						icon: 'none'
					});
				}
			});
		},
		navTo(url, type) {
			if (!type) {
				type = 'navigateTo';
			}
			uni[type]({
				url: url
			});
		}
	}
};
</script>

<style scoped lang="scss">
.bg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	pointer-events: none;
}
::v-deep .car {
	position: relative;
	image {
		display: block;
		width: 64upx;
		height: 64upx;
	}
	.u-badge {
		position: absolute;
		right: 0rpx;
		transform: translate(50%, -50%);
		top: 0;
		z-index: 999;
	}
}
.card,
page {
	background-color: #fff;
}

.card {
	border-radius: 20rpx;
	margin: 20rpx;
	padding: 80rpx 0;
}

.share-lead-mask {
	background: rgba(0, 0, 0, 0.7);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: all 0.5s linear 0;
	z-index: 2000;
}

.share-lead-mask .arrow {
	height: 200rpx;
	position: fixed;
	right: 10vw;
	top: 13vh;
	width: 200rpx;
	z-index: 2001;
}

.share-lead-mask .text {
	background: transparent;
	position: fixed;
	right: 10vw;
	top: calc(13vh + 220rpx);
	z-index: 2001;
}

.visible {
	visibility: visible;
}

.hidden {
	visibility: hidden;
}
.sellerInfo {
	color: #fff;
	padding: 0 40upx;
	.name {
		font-size: 36upx;
		font-weight: 500;
	}
	.imgbox {
		width: 100upx;
		height: 100upx;
		border: 1px solid #fff;
		border-radius: 100%;
		background: #fff;
		overflow: hidden;
		margin-right: 28upx;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}

.follow {
	position: relative;
	color: var(--nav-bg);
	width: 144upx;
	height: 56upx;
	background: #ffffff;
	border-radius: 24upx;
	font-size: 26upx;
	font-weight: 400;
	image {
		width: 26upx;
		height: 26upx;
		display: block;
		font-size: 24px;
	}
}
.shop-tag {
	height: 32upx;
	margin: 0 6rpx;
}
</style>
